<template>
  <div>
    <div>
      <div class="top">
        <a >
          <img src="../assets/milogo.jpg" alt />
        </a>
      </div>
      <div class="middle">
        <a href="javascript:;">
          <img src="../assets/quanping.jpg" alt />
        </a>

        <div class="login">
          <div>
            <routerLink to='/login'>账号登录</routerLink>
            <span>|</span>
            <routerLink to="/register">账号注册</routerLink>
          </div>
          <div>
            <div>
              <input type="text" placeholder="邮箱/手机号" v-model="uname" @blur="checkUname" />
              <i v-if="unameEmpty" class="iconfont iconerror"></i>
              <i v-else-if="success==true" class="iconfont iconok"></i>
              <i v-else-if="success==false"  class="iconfont iconerror"></i>

              <p v-if="unameEmpty">用户名不能为空</p>
              <p v-else-if="success==false">用户名或密码不正确</p>
              <p v-else></p>
            </div>
            <div>
              <input type="password" placeholder="密码" v-model="upwd" @blur="checkUpwd"  />
              <i v-if="upwdEmpty" class="iconfont iconerror"></i>
               <i v-show="success==true" class="iconfont iconok"></i>
              <p v-if="upwdEmpty">请输入密码</p>
              <p v-else></p>
            </div>

            <a href="javascript:;" @click="doLogin">登录</a>
            <p>
              <routerLink to='/register'>立即注册</routerLink >
              <span>|</span>
              <a >忘记密码?</a>
            </p>
          </div>
          <div>
            <hr />
            <p>其他方式登录</p>
          </div>
          <div>
            <a  class="iconfont iconqq" style="color:#1296db"></a>
            <a  class="iconfont iconweibo" style="color:#d81e06"></a>
            <a  class="iconfont iconzhifubao" style="color:#1296db"></a>
            <a  class="iconfont iconweixin2" style="color:#1afa29"></a>
          </div>
        </div>
      </div>
      <div class="bottom">
        <ul>
          <li>
            <a >简体</a>
          </li>
          <li>
            <a >繁体</a>
          </li>
          <li>
            <a >English</a>
          </li>
          <li>
            <a >常见问题</a>
          </li>
          <li>
            <a >隐私政策</a>
          </li>
        </ul>
        <p>小米公司版权所有-京ICP备10046444-京公网安备11010802020134号-京ICP证110507号</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uname: "",
      upwd: "",
      unameEmpty: false, //用户名为空
      upwdEmpty: false, //密码为空
      success: undefined
    };
  },
  methods: {
    checkUname() {
      this.unameEmpty = this.uname == "";
    },
    checkUpwd() {
      this.upwdEmpty = this.upwd == "";
    },
    doLogin() {
      let url = "/user/login";
      let data = {
        uname: this.uname,
        upwd: this.upwd
      };
      let config = {};
      this.$http.post(url, data, config).then(res => {
        if (res.data.code === 200) {
          //把服务器端验证通过的会话用户信息在session对象中
          sessionStorage.setItem("uname",res.data.sessionUser.uname);
          sessionStorage.setItem("uid",res.data.sessionUser.uid);
  
          console.log(res.data);
          this.$store.commit("setSessionUser", res.data.sessionUser);
           //把服务器端验证通过的会话用户信息在客户端保存一份(响应式数据)
          this.success = true;
          this.$store.dispatch("getCart");
          alert("登录成功！点击确定可以返回之前的页面");
          this.$router.go(-1);
        } else {
          alert("登录失败！错误原因：" + res.data.msg);
          this.success = false;
        }
      });
    }
  }
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
.top {
  margin: 35px 0 20px 58px;
}
.middle {
  width: 1574px;
  height: 616px;
  position: relative;
}
.middle > .login {
  position: absolute;
  width: 410px;
  height: 586px;
  top: 30px;
  left: 350px;
  background-color: #fff;
}
.middle > .login > div:first-child {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 40px;
}
.middle > .login > div > a {
  width: 50%;
  height: 60px;
  line-height: 60px;
  text-align: center;
  color: #ff6700;
  font-size: 24px;
}
.middle > .login > div > span {
  line-height: 60px;
  color: #757575;
}
.middle > .login > div:nth-child(2) div {
  width: 360px;
  position: relative;
  left: 35px;
  top:25px;
}
.middle > .login > div:nth-child(2) div > input {
  width: 310px;
  height: 50px;
  border: 1px solid #e0e0e0;
  outline: 0;
  font-size: 18px;
  padding-left: 10px;
}
.middle > .login > div:nth-child(2) div > p {
  width: 270px;
  height: 35px;
  margin: 8px 0;
  color:#ff6700;
  font-size: 18px;
  line-height: 35px;
  padding-left: 8px;
}
.middle > .login > div:nth-child(2) div > i.iconok {
  position: absolute;
  font-size: 35px;
  top: 12px;
  color: green;
  right: 0;
}
.middle > .login > div:nth-child(2) div > i.iconerror {
  position: absolute;
  font-size: 28px;
  top: 12px;
  right: 3px;
  color: red;
}

.middle > .login > div:nth-child(2) > a {
  display: block;
  height: 40px;
  width: 360px;
  margin-top: 35px;
  margin-left: 36px;
  background-color: #ff6700;
  line-height: 40px;
  color: #fff;
  font-size: 16px;
}
.middle > .login > div > p {
  width: 50%;
  height: 20px;
  margin: 10px 0 10px 39px;
  text-align: left;
  color: #ff6700;
  font-size: 14px;
}
.middle > .login > div > p:last-child > a {
  color: #999;
}
.middle > .login > div > p:last-child > span {
  color: #999;
  margin: 0 5px;
}
.middle > .login > div:nth-child(3) {
  margin-top: 30px;
  position: relative;
}
.middle > .login > div:nth-child(3) > hr {
  width: 80%;
  margin-left: 36px;
  color: #757575;
}
.middle > .login > div:nth-child(3) > p {
  color: #757575;
  position: absolute;
  top: -20px;
  left: 123px;
  width: 21%;
  background-color: #fff;
}
.middle > .login > div:last-child {
  display: flex;
  justify-content: space-around;
  width: 60%;
  margin: 15px auto;
}
.middle > .login > div:last-child > a {
  font-size: 30px;
}

.bottom {
  width: 800px;
  margin: 0 auto;
}
.bottom > ul {
  width: 340px;
  display: flex;
  margin: 15px auto;
}
.bottom > ul > li > a,
.bottom > p {
  color: #757575;
  font-size: 14px;
  text-align: center;
}
.bottom > p {
  margin-bottom: 50px;
}
.bottom > ul > li + li::before {
  content: "|";
  display: inline;
  margin: 8px;
  color: #757575;
  font-size: 12px;
}
</style>